<template>
	<view
		:style="'order:'+item.order+';'+item.css"
		class="box-swiper-hashtag">
		<scroll-view scroll-x>
			<view class="box-swiper-hashtag-box">
				<view
					class="_for"
					v-for="item in item.list"
					@click="$_to('hashtag/detail?hid=' + item.name)">
					<text :style="item.nameCss">{{item.name}}</text>
					<view
						class="_icon"
						v-if="item.icon"
						:style="item.iconCss">{{item.icon}}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name:"box-swiper-hashtag",
		props:{
			item:{
				type:Object,
				default:null
			}
		},
		data() {
			return {
				
			};
		},
		mounted(){
			
		},
	}
</script>

<style lang="scss" scoped>
.box-swiper-hashtag{
	padding: 25rpx;
	scroll-view{
		background: #FFF;
		white-space: nowrap;
		padding: 0 25rpx 25rpx 25rpx;
		width:calc(100% - 50rpx);
		.box-swiper-hashtag-box{
			width: 1500rpx;
			._for{
				display: inline-flex;
				background: #f3f3f3;
				line-height: 28rpx;
				position: relative;
				padding: 20rpx 25rpx;
				margin: 25rpx 25rpx 0 0;
				border-radius: 100rpx;
				text{
					font-size: 28rpx;
					color: #555;
				}
				._icon{
					position: absolute;
					z-index: 1;
					top: -15rpx;
					right: -20rpx;
					background: #393b54;
					font-size: 18rpx;
					line-height: 18rpx;
					color: #FFF;
					padding: 0 10rpx;
					height: 30rpx;
					display: flex;
					align-items: center;
					border-radius: 100rpx 100rpx 100rpx 0;
				}
			}
		}
	}
}
</style>